<template>
  <div>
    <div
      style="padding-top: 20px"
      v-if="showSearch"
      :class="{
        'enter-level flipInX': showSearch,
      }"
    >
      <el-form :inline="true" :model="operlogsearch" class="demo-form-inline">
        <el-row justify="space-around" :gutter="25" style="margin-left:0px;margin-right:0px ">
          <el-col :span="5">
          <el-form-item label="操作地址">
          <el-input
            v-model="operlogsearch.ipaddr"
            placeholder="请输入操作地址"
            clearable
          />
        </el-form-item>
        </el-col>
        <el-col :span="5">
        <el-form-item label="系统模块">
          <el-input
            v-model="operlogsearch.title"
            placeholder="请输入系统模块"
            clearable
          />
        </el-form-item>
        </el-col>
        <el-col :span="5">
        <el-form-item label="操作人员">
          <el-input
            v-model="operlogsearch.operName"
            placeholder="请输入操作人员"
            clearable
          />
        </el-form-item>
        </el-col>
        <el-col :span="5">
        <el-form-item label="类型">
          <el-select v-model="operlogsearch.businessType" placeholder="类型" clearable>
            <el-option label="新增" value="1" />
            <el-option label="修改" value="2" />
            <el-option label="删除" value="3" />
            <el-option label="其它" value="0" />
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="5"></el-col>
        </el-row>
        <el-row justify="space-around" :gutter="25" style="margin-left:0px;margin-right:0px ">
          <el-col :span="5">
           <el-form-item label="状态">
            <el-select v-model="operlogsearch.status" placeholder="类型" clearable>
              <el-option label="成功" value="0" />
              <el-option label="失败" value="1" />
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="5">
          <el-form-item>
            <el-button type="primary" @click="getDataList" :icon="Search">
              搜索
            </el-button>
            <el-button type="info" @click="reset" :icon="Refresh">
              重置
            </el-button>
          </el-form-item>
          </el-col>
          <el-col :span="5"> </el-col>
          <el-col :span="5"> </el-col>
          <el-col :span="5"> </el-col>
          </el-row>
      </el-form>
    </div>
    <div style="padding: 30px">
      <div
        style="
          display: flex;
          justify-content: space-between;
        "
      >
        <div>
          <el-button
            :icon="Delete"
            type="danger"
            plain
            @click="removeLog"
            :disabled="isBatch"
            >删除</el-button
          >
          <el-button :icon="Scissor" type="danger" plain @click="clearData">
            清空</el-button>
          <el-button :icon="Bottom" type="warning" plain @click="open(null,2)">
            导出</el-button>
        </div>
        <div>
          <el-button
            :icon="Search"
            circle
            @click="showSearch = !showSearch"
          ></el-button>
          <el-button :icon="Refresh" circle @click="reset"></el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="dataList"
        style="width:100%"
        height="600"
        @selection-change="handleSelectionChange"
        v-loading="dataLoding"
        
      >
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column
          property="operId"
          label="日志编号"
          width="105"
        />
        <el-table-column property="title" label="系统模块" />
        <el-table-column #default="scope" label="操作类型">
          <template  v-if="scope.row.businessType==0"> <el-tag type="info">其它</el-tag></template>
          <template  v-if="scope.row.businessType==1"><el-tag type="info">新增</el-tag></template>
          <template  v-if="scope.row.businessType==2"><el-tag type="info">修改</el-tag></template>
          <template  v-if="scope.row.businessType==3"><el-tag type="info">删除</el-tag></template>
        </el-table-column>
        <el-table-column property="operName" label="操作人员" />
        <el-table-column property="operIp" label="操作地址" />
        <el-table-column label="请求方式" width="180">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>Method:{{ scope.row.method }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.requestMethod }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
        <el-table-column #default="scope" label="状态">
          <template  v-if="scope.row.status==0"> <el-tag type="success">成功</el-tag></template>
          <template  v-if="scope.row.status==1"><el-tag type="danger">失败</el-tag></template>
        </el-table-column>
        <el-table-column #default="scope" label="消耗时间">{{ scope.row.costTime}}毫秒</el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button @click="open(scope.row,1)" type="text" :icon="Bottom">
              导出
            </el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="确定要删除该日志吗？"
              @confirm="oneremoveLog(scope.row)"
              @cancel="removeCnacle"
            >
              <template #reference>
                <el-button type="text" :icon="Delete"> 删除 </el-button>
              </template>
            </el-popconfirm>
            <el-button @click="getDetails(scope.row)" type="text" :icon="View">
              详细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-pagination
          :hide-on-single-page="false"
          background
          layout="prev, pager, next"
          :total="pages.total"
          :page-size="operlogsearch.pageSize"
          :page-count="pages.pages"
          @current-change="changePage"
          :pager-count="15"
        />
      </div>
    </div>
    <el-dialog
    v-model="dialogOverflowVisible"
    title="操作日志详细"
    width="700"
    draggable
    overflow
  >
    <el-row justify="space-around" :gutter="24">
      <el-col :span="10">
        <span>操作模块：{{ logdetails.title }}/
          <span v-if="logdetails.businessType==0">其它</span>
          <span v-if="logdetails.businessType==1">新增</span>
          <span v-if="logdetails.businessType==2">修改</span>
          <span v-if="logdetails.businessType==3">删除</span>
        </span>
      </el-col>
      <el-col :span="14">
        <span>请求地址：{{ logdetails.operUrl }}</span>
      </el-col>
    </el-row>
    <el-row justify="space-around" :gutter="24" style="margin-top:2%">
      <el-col :span="10">
        <span>登录信息：{{ logdetails.operName }}/{{ logdetails.operIp }}</span>
      </el-col>
      <el-col :span="14">
        <span>请求方式：{{logdetails.requestMethod}}</span>
      </el-col>
    </el-row>
    <el-row justify="space-around" :gutter="24" style="margin-top:2%">
      <el-col :span="24">
        <span>操作方法：{{ logdetails.method }}</span>
      </el-col>
    </el-row>
    <el-row justify="space-around" :gutter="24" style="margin-top:2%">
      <el-col :span="24">
        <span>请求参数：{{ logdetails.operParam }}</span>
      </el-col>
    </el-row>
    <el-row justify="space-around" :gutter="24" style="margin-top:2%">
      <el-col :span="24">
        <span>返回参数：{{ logdetails.jsonResult }}</span>
      </el-col>
    </el-row>
    <el-row justify="space-around" :gutter="24" style="margin-top:2%">
      <el-col :span="8">
        <span>操作状态：{{ logdetails.status==0?'正常':'异常' }}</span>
      </el-col>
      <el-col :span="8">
        <span>消耗时间：{{ logdetails.costTime }}毫秒</span>
      </el-col>
      <el-col :span="8">
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogOverflowVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import request from "@/assets/js/request";
import { ref, onMounted } from "vue";
import { ElMessage,ElMessageBox  } from "element-plus";
import {
  Search,
  Refresh,
  Delete,
  Scissor,
  Bottom,
  View
} from "@element-plus/icons-vue";


const operlogsearch=ref({
  operIp:'',
  title:'',
  operName:'',
  businessType:null,
  status:null,
  idlist:'',
  pageNum:1,
  pageSize:20
})
const dataList=ref([])
const pages=ref({
  total:0,
  pages:0
})

const showSearch = ref(true);
const dataLoding = ref(false);

// 记录当前批量删除tag的步骤
const selectable = ref();
const isBatch = ref(true);
const selectKey = ref([]);
//导出提示语
const msg=ref('确定导出所有日志数据？数据过大时可能较慢！')
//日志详情
const logdetails=ref({
  title:'',
  businessType:'',
  operUrl:'',
  operName:'',
  operIp:'',
  method:'',
  requestMethod:'',
  operParam:'',
  jsonResult:'',
  status:'',
  costTime:''
})
//详细显示参数
const dialogOverflowVisible = ref(false)

//详情
const getDetails=(data)=>{
  logdetails.value=data
  dialogOverflowVisible.value=true;
}

//导出请求
const fetchFile=()=>{
    request.post(`/operlog/exce`,operlogsearch.value,{responseType:'arraybuffer'}).then((response) => {
            const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '操作日志.xlsx';// 设置下载文件名
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
    })
    .catch(err =>{
      ElMessage.error(err.message);
       }
    )
}
//导出事件
const open = (data,key) => {
  if(key===2){
    getIdList(selectKey.value);}
  else{
    msg.value='确定导出该日志消息？'
    getId(data)}
  ElMessageBox.confirm(
    msg.value,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
      fetchFile();
    }).catch(() => {
      msg.value='确定导出所有数据？'
      operlogsearch.value.idlist='';
      ElMessage({
        type: 'success',
        message: 'Canceled',
      })
    })
}
//确定idlist
const getIdList=(data)=>{
  if(data.length>0){
    msg.value='确定导出所选日志消息？'
    data.forEach(element => {
      operlogsearch.value.idlist=element+','+operlogsearch.value.idlist;
    });
  }
}
//单个idlist确定
const getId=(data)=>{
  operlogsearch.value.idlist=data.operId;  
}
//获取数据
const getDataList=()=>{
  dataLoding.value = true;
  getIdList(selectKey.value);
  request.post('/operlog/page',operlogsearch.value).then((res) => {
    console.log('获取数据：'+res);
    
    if(res.code===200){
        dataList.value=res.data.list;
        pages.value.total=res.data.total;
        pages.value.pages=res.data.pages;
      }else {
        ElMessage.error(res.msg);
      }
      dataLoding.value = false;
  }).catch(err =>{
    ElMessage.error(err.message);
     }
  )
  setTimeout(() => {
    dataLoding.value = false;
  }, 5000);
}
//换页
const changePage = (pageIndex) => {
  operlogsearch.value.pageNum = pageIndex;
  getDataList();
};
//删除请求
const removeRequest=()=>{
  request.post(`/operlog/del?idlist=`+operlogsearch.value.idlist).then((res) => {
    if(res.code===200){
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    }
    getDataList();
  }).catch(err =>{
    ElMessage.error(err.message);
     }
  )
  selectKey.value=[]
  msg.value='确定导出所有日志数据？数据过大时可能较慢！'

}
//批量删除事件
const removeLog=()=>{
  getIdList(selectKey.value)
  ElMessageBox.confirm(
    '确定删除所选项?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
      removeRequest();
    }).catch(() => {
      selectKey.value=[]
      operlogsearch.value.idlist=''
    })
    
}
//单删确定
const oneremoveLog=(data)=>{
  operlogsearch.value.idlist=data.operId;
  removeRequest();
  getDataList();
}
//单删取消
const removeCnacle=()=>{
  operlogsearch.value.idlist='';
}
//清空
const clearData=()=>{
  ElMessageBox.confirm(
    '确认要清空所有数据?危险！不可逆！',
    'error',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  ).then(() => {
      request.post('/operlog/clear').then((res) => {
        if(res.code===200){
          ElMessage({
            type: 'success',
            message: '数据已全部清空',
          })
          getDataList();
        }else{
          ElMessage.error(res.msg)
        }
      }).catch(err =>{ElMessage.error(err.message);}
      )
    }).catch(() => {}
  )
}
const reset = () => {
  operlogsearch.value={
  operIp:'',
  title:'',
  operName:'',
  businessType:null,
  status:null,
  idlist:'',
  pageNum:1,
  pageSize:20
  }
  getDataList(); 
};

// 多选
const handleSelectionChange = (val) => {
  console.log(val);
  let arr = val.map((item) => item.operId);
  selectKey.value = arr;
  if (selectKey.value.length > 0) {
    isBatch.value = false;
  } else {
    isBatch.value = true;
  }
};

onMounted(() => {
  // getLogDataList();
  getDataList();
});
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-form-item__label {
  font-weight: bold;
}

.el-form {
  display: inline;
}

.activeTag {
  background: #fef0f0;
  border: #fde2e2 1px solid;
  color: #f67777;
}
.el-input {
    position: relative;
    display: inline-block;
    width: 220px;
}
</style>



